'use strict';
var React = require('react');
var ReLeftTabitem = require('../../components/pc/ReLeftTabItem.jsx');

class ReLeftTab extends React.Component {
    constructor(props) {
        super(props);
        this.state={
          activeKeyStr:props.activeKeyStr
        };
        this.renderleftTitle = this.renderleftTitle.bind(this);
        this.getMainClass = this.getMainClass.bind(this);
        this.renderContents=this.renderContents.bind(this);
        this.getItemVisbleClass=this.getItemVisbleClass.bind(this);
        this.setActiveKey=this.setActiveKey.bind(this);
    }

    //设置选中项编号
    setActiveKey(key){
        this.setState({
            activeKeyStr:key
        });
    }

    renderleftTitle() {
        return this.props.children.map((item, i)=> {
            if (item.props.type == "normal") {
                if (item.props.isGroup) {
                    var items = [];
                    var keyStrArray=[];
                    for (var child in item.props.children) {
                        if(typeof item.props.children[child] =='object') {
                            items.push(item.props.children[child].props.titleName);
                            keyStrArray.push(i + '-' + child);
                        }
                    }
                    return <ReLeftTabitem key={"ReLeftTabitem"+i} mainTitle={item.props.groupName} childrenItems={items} keyStrArray={keyStrArray} itemClick={this.setActiveKey} activeKey={this.state.activeKeyStr}></ReLeftTabitem>
                }
                else {
                    return <ReLeftTabitem key={"ReLeftTabitem"+i} mainTitle={item.props.titleName} keyStr={i} itemClick={this.setActiveKey}  activeKey={this.state.activeKeyStr}></ReLeftTabitem>
                }
            }
            else {
                if (item.props.type == "header") {
                    return <div key="ReLeftTabitemHeader" className="header">{item}</div>
                }
                else if (item.props.type == "footer") {
                    return <div key="ReLeftTabitemFooter" className="footer">{item}</div>
                }
            }

        });
    }

    getItemVisbleClass(key){
        if(key==this.state.activeKeyStr){
            return 'NormalItem'
        }
        else{
            return 'HideItem'
        }
    }

    renderContents(){
        var itemArray=[];
        var singleItems= this.props.children.map((item, i)=> {
            if (item.props.type == "normal") {
                if (item.props.isGroup) {
                    for (var child in item.props.children) {
                        itemArray.push(<div  key={"ReLeftTabitemContent"+i+'-'+child} className={this.getItemVisbleClass(i+'-'+child)}>{item.props.children[child]}</div>);
                    }
                }
                else{
                    return <div  key={"ReLeftTabitemContent"+i} className={this.getItemVisbleClass(i)}>{item}</div>
                }
            }
        });
        return singleItems.concat(itemArray);
    }


    getMainClass() {
        if (this.props.reClass) {
            return 'ReLeftTab ' + this.props.reClass;
        }
        else {
            return 'ReLeftTab'
        }

    }

    render() {
        return <div className={this.getMainClass()}>
            <div className="left">
                {this.renderleftTitle()}
            </div>
            <div className="right">
                {this.renderContents()}
            </div>
        </div>
    }

}

module.exports = ReLeftTab;